<!--
/**
 * @intro: 基本表格.
 */
-->
<template>
  <div class='table'>
    <ui-container style="width:100%">
      <div class='t_top'>
        <el-select v-model="value" placeholder="请选择" size="small" style="width:100px;">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input
          placeholder="请输入内容"
          v-model="input"
          size="small"
          clearable style="width:300px">
        </el-input>
        <el-button type="primary" size="small" @click="search">查询</el-button>
      </div>
    </ui-container>
    <ui-container style='margin-top:15px'>
      <div style="text-align:right;" class="btn-row">
        <el-button type="success" size="small" @click="openDialogIntegral">赠送积分</el-button>
        <el-button type="success" size="small" @click="openDialogCoupon">赠送优惠券</el-button>
        <el-button type="danger" size="small" @click="del">删除用户</el-button>
        <!-- <el-button type="danger" size="small" @click="resetUserPassword">重置密码</el-button> -->
      </div>
      <div class='t_bottom' style="width:100%; font-size:14px;">
        <el-table
          ref='multipleTable'
          :data='tableData'
          tooltip-effect='light'
          style='width:100%'
          v-loading="loading"
          border
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column prop='HeadUrl' label='头像' width='60' show-overflow-tooltip>
            <template slot-scope="scope">
              <img v-if="scope.row.HeadUrl" :src="scope.row.HeadUrl" style="width:30px;height:30px;" />
              <img v-else src="../../../assets/images/logo.jpg" style="width:30px;height:30px;" />
            </template>
          </el-table-column>
          <el-table-column prop='UserNumber' label='会员号' show-overflow-tooltip></el-table-column>
          <el-table-column prop='UserName' label='用户名'  width='120' show-overflow-tooltip></el-table-column>
          <el-table-column prop='Phone' label='手机号' width='110' show-overflow-tooltip></el-table-column>
          <el-table-column prop='Email' label='邮箱' width='120' show-overflow-tooltip></el-table-column>
          <el-table-column prop='Birthday' label='出生日期' width='120' show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-text="scope.row.Birthday? (scope.row.Birthday).substring(0,10) : ''"></span>
            </template>
          </el-table-column>
          <el-table-column prop='Gender' label='性别' width='60' show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.Gender == 1">男</span>
              <span v-if="scope.row.Gender == 2">女</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop='CarNumber' label='车牌号' width='100' show-overflow-tooltip></el-table-column> -->
          <el-table-column prop='Integral' label='积分余额' width='100' show-overflow-tooltip></el-table-column>
          <el-table-column prop='CouponNumber' label='优惠券数量' width='100' show-overflow-tooltip></el-table-column>
          <el-table-column prop='registerDate' label='注册日期' show-overflow-tooltip></el-table-column>
        </el-table>
        <div class="pagination-row">
          <el-pagination
            background
            layout="total,prev, pager, next,sizes"
            :page.sync="pageIndex"
            :limit.sync="pageSize"
            @current-change = "crurentChange"
            @size-change = "sizeChange"
            :total="totalNum">
          </el-pagination>
        </div>
      </div>
    </ui-container>
    <el-dialog
      title="赠送积分"
      :visible.sync="dialogIntegral"
      width="30%"
      >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm" style="padding-right:30px;">
        <el-form-item label="赠送积分金额" prop="amount">
          <el-input v-model="ruleForm.amount" size="small" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogIntegral = false" size="small">取 消</el-button>
        <el-button type="primary"  @click="submitIntegral('ruleForm')" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="赠送优惠券"
      :visible.sync="dialogCoupon"
      width="30%"
      >
      <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="150px" class="demo-ruleForm" style="padding-right:30px;">
        <el-form-item label="赠送优惠券金额" prop="amount">
          <el-input v-model="ruleForm1.amount" size="small" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCoupon = false" size="small">取 消</el-button>
        <el-button type="primary"  @click="submitCoupon('ruleForm1')" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script type='text/javascript'>
export default {
  name: 'UserList',
  data () {
    var checkAmount = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入赠送积分金额'));
        }
        setTimeout(() => {
          let myreg=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
          if (!myreg.test(value)) {
            return callback(new Error('格式不正确，最多两位小数'));
          }else{
            callback();
          }
        }, 100);
      };
    var checkAmount1 = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入赠送优惠券金额'));
        }
        setTimeout(() => {
          let myreg=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
          if (!myreg.test(value)) {
            return callback(new Error('格式不正确，最多两位小数'));
          }else{
            callback();
          }
        }, 100);
      };
    return {
      options: [{
          value: 'Phone',
          label: '手机号'
        }, {
          value: 'UserName',
          label: '用户名'
        }, {
          value: 'UserNumber',
          label: '会员号'
        }],
      value: 'Phone',
      input: '',
      userId:'',
      tableData: [],
      pageIndex:1,
      pageSize:10,
      totalNum:0,
      UserName:'',
      Phone:'',
      CarNumber:'',
      loading:false,
      dialogIntegral:false,
      ruleForm: {
        amount: '',
      },
      rules: {
        amount: [
          { validator: checkAmount, trigger: 'blur' }
        ]
      },
      dialogCoupon:false,
      ruleForm1: {
        amount: '',
      },
      rules1: {
        amount: [
          { validator: checkAmount1, trigger: 'blur' }
        ]
      },
    }
  },
  mounted () {
    this.init();
  },
  methods: {
    crurentChange(val){
      this.pageIndex = val;
      this.init()
    },
    sizeChange(val){
      this.pageSize = val;
      this.init()
    },
    search(){
      this.pageIndex = 1;
      this.init();
    },
    init(){
      let data = {
        PageIndex: this.pageIndex,
        PageSize: this.pageSize
      }
      if(this.value == 'Phone'){
        data.Phone = this.input;
      }else if(this.value == 'UserName'){
        data.UserName = this.input;
      }else if(this.value == 'CarNumber'){
        data.CarNumber = this.input;
      }else if(this.value == 'UserNumber'){
        data.UserNumber = this.input;
      }
      this.loading = true;
      this.$api.user.getUserList(data).then((rs) => {
        this.tableData = rs.Data.Data;
        this.totalNum = rs.Data.TotalNum;
        this.loading = false;
      }).catch((res) =>{
        this.loading = false;
      })
    },
    openDialogIntegral(){
      let selected = this.$refs.multipleTable.selection;
      if (selected.length !== 1) {
          this.$message.error("请选择一条数据！");
          return;
      }
      let ids = [];
      ids = ids.concat(selected.map(m => m.Id));
      let id = ids[0];
      this.dialogIntegral = true;
      this.userId = id;
      this.ruleForm.amount = '';
    },
    submitIntegral(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            let data ={
              userId: this.userId,
              amount: this.ruleForm.amount
            }
            this.$api.user.handselIntegrals(data).then((rs) => {
              if(rs.IsSuccess){
                this.$message({
                  type: 'success',
                  message: '赠送成功'
                });
                this.dialogIntegral = false;
                this.init()
              }
            }).catch((res) =>{
            })
          } else {
            this.dialogIntegral = true;
          }
        });
    },
    openDialogCoupon(){
      let selected = this.$refs.multipleTable.selection;
      if (selected.length !== 1) {
          this.$message.error("请选择一条数据！");
          return;
      }
      let ids = [];
      ids = ids.concat(selected.map(m => m.Id));
      let id = ids[0];
      this.dialogCoupon = true;
      this.userId = id;
      this.ruleForm1.amount = '';
    },
    del(){
      let selected = this.$refs.multipleTable.selection;
      if (selected.length !== 1) {
          this.$message.error("请选择一个用户数据删除！");
          return;
      }
      let ids = [];
      ids = ids.concat(selected.map(m => m.Id));
      let id = ids[0];
      let params ={
        userId: id
      }
      this.$confirm('此操作将删除用户数据 , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.user.deleteUser(params).then((rs) => {
          if(rs.IsSuccess){
            this.$message({
              type: 'success',
              message: '删除成功！'
            });
            this.dialogCoupon = false;
            this.ruleForm1.amount = '';
            this.init()
          }
        }).catch((res) =>{
        })
      }).catch(() => {
      });
    },
    submitCoupon(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            let data ={
              userId: this.userId,
              Amount: this.ruleForm1.amount
            }
            this.$api.user.handselCoupon(data).then((rs) => {
              if(rs.IsSuccess){
                this.$message({
                  type: 'success',
                  message: '赠送成功'
                });
                this.dialogCoupon = false;
                this.ruleForm1.amount = '';
                this.init()
              }
            }).catch((res) =>{
            })
          } else {
            this.dialogCoupon = true;
          }
        });
    },
    resetUserPassword(){
      let selected = this.$refs.multipleTable.selection;
      if (selected.length !== 1) {
          this.$message.error("请选择一条数据！");
          return;
      }
      let ids = [];
      ids = ids.concat(selected.map(m => m.Id));
      let id = ids[0];
      this.$confirm('此操作将重置用户密码为"000000" , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.user.resetUserPassword(id).then((rs) => {
          if(rs.IsSuccess){
            this.$message({
              type: 'success',
              message: '重置成功！'
            });
            this.dialogIntegral = false;
            this.ruleForm.amount = '';
            this.init()
          }
          }).catch((res) =>{
        });
      }).catch(() => {});
    }
  }
}
</script>
<style lang='scss' type='text/scss' rel='stylesheet/scss'>
.container-main{
  width: 100% !important;
}
.btn-row{
    margin-bottom:10px;
  }
  .btn-row .el-button+.el-button{
    margin-left:0px;
  }
</style>
